import React, {useState, useEffect} from 'react'
import {Table} from 'antd'
import axios from 'axios' 

export default function Posting() {

    const [dataSource, setDataSource] = useState([])
    useEffect(()=>{
        axios.get("/api/topics/get_all_topics_including_comments").then(res=>{
            console.log(res.data.result)
            setDataSource(res.data.result)
        })
    },[]) 
   
    const columns = [
        {
          title: '帖子id',
          dataIndex: 'id',
          key: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '发帖人',
          dataIndex: 'topic_user_name',
          key: 'topic_user_name',
          render:(topic_user_name)=>{
            return <b>{topic_user_name}</b>
          }
        },
        {
            title: '帖子题目',
            dataIndex: 'topic_title',
            key: 'topic_title',
            render:(topic_title)=>{
                return <b>{topic_title}</b>
            }
        },
        {
            title:'评论者id',
            dataIndex:'comments_mes',
            key:'comment_user_id',
            render(arr){
                return arr.map(item=>{
                    return <p>{item.comment_user_id}</p>
                })
            }
        },
        {
            title:'评论者昵称',
            dataIndex:'comments_mes',
            key:'comment_user_name',
            render(arr){
                return arr.map(item=>{
                    return <p>{item.comment_user_name}</p>
                })
            }
        },
        {
            title:'评论内容',
            dataIndex:'comments_mes',
            key:'comment_content',
            render(arr){
                return arr.map(item=>{
                    return <p>{item.comment_content}</p>
                })
            }
        },
        {
            title: '评论日期',
            dataIndex: 'comments_mes',
            key: 'createdAt',
            render(arr){
                return arr.map(item=>{
                    return <p>{item.createdAt.slice(0,10)}</p>
                })
            }
        },
        
    ]
    return (
        <div>
            <Table dataSource={dataSource} 
              columns={columns}
              pagination={{
                pageSize:6}} 
              rowKey={dataSource=>dataSource.id}
            />
        </div>
    )
}